import { map } from "./mapJson.js";

export default function bar() {


  var scale = 10; // 缩放比例 以mapScale縮放的倍数为scale
  var mapScale = 0; // 调整地图的默认的缩放大小
  // ----------- pageSlicePos, scale 这两个值是重点------------------

  const solidColor = "#ccc"; // 实线颜色
  const dashedColor = "#f0f0f0"; // 虚线颜色
  const zeroColor = "#358bf3"; // 0 点坐标系颜色
  const GRIDSIZE = 5; // 一个正方形网格的宽高大小, 一个GRIDSIZE视为一个单位

  const myCanvas = document.querySelector("#myCanvas");

  // myCanvas.style.cursor= "pointer";
  const pageSlicePos = {
    // 坐标系的原点
    x: myCanvas.width / 2,
    y: myCanvas.height / 2,
  };
  const ctx = myCanvas.getContext("2d"); // 获取canvas上下文
  myCanvas.addEventListener("mousedown", mouseDown);
  myCanvas.addEventListener("mousewheel", mouseWheel);
  myCanvas.addEventListener("mousemove", mouseMove);

  const curMousePos = {
    x: 0,
    y: 0,
  };

  const arrX = [];
  const arrY = [];
  map.features.forEach((item) => {
    let coordinates = item.geometry.coordinates;
    coordinates.forEach((data) => {
      data.forEach((data1) => {
        if (data1.length > 2) {
          data1.forEach((data2, i) => {
            arrX.push(data2[0]);
            arrY.push(data2[1]);
          });
        }
      });
    });
  });
  const left = Math.min(...arrX);
  const right = Math.max(...arrX);
  const topp = Math.min(...arrY);
  const bottom = Math.max(...arrY);
  let mapH = topp + bottom;
  let mapW = left + right;
  let mapCenterPos = [mapW / 2, mapH / 2];

  const lenx = right - left;
  const leny = bottom - topp;



  const ratioX = myCanvas.width / lenx / 2;
  const ratioY = myCanvas.height / leny / 2;
  mapScale = ratioX > ratioY ? ratioY : ratioX;

  /**
   * 绘制网格
  //  * @param scaleVal 缩放倍数
   */
  var drawLineGrid = (scaleVal = scale) => {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    /*获取绘图工具*/
    // 设置网格大小
    var girdSize = getPixelSize(GRIDSIZE);
    // 获取Canvas的width、height
    var CanvasWidth = ctx.canvas.width;
    var CanvasHeight = ctx.canvas.height;

    // 这个是中心的小方块，注释
    // 在 pageSlicePos 的 x，y 点位画一个 10 * 10 的红色标记用来表示当前页面的 0 0 坐标
    // ctx.fillStyle = 'red';
    // ctx.fillRect(pageSlicePos.x - 5, pageSlicePos.y - 5, 10, 10); // 效果图红色小方块

    const canvasXHeight = CanvasHeight - pageSlicePos.y;
    const canvasYWidth = CanvasWidth - pageSlicePos.x;
    // // 从 pageSlicePos.y 处开始往 Y 轴正方向画 X 轴网格
    // const xPageSliceTotal = Math.ceil(canvasXHeight / girdSize);   // 每隔一个单位画一条线
    // for (let i = 0; i < xPageSliceTotal; i++) {
    //     ctx.beginPath(); // 开启路径，设置不同的样式
    //     ctx.moveTo(0, pageSlicePos.y + girdSize * i);
    //     ctx.lineTo(CanvasWidth, pageSlicePos.y + girdSize * i);
    //     ctx.strokeStyle = i === 0 ? zeroColor : (i % 5 === 0 ? solidColor : dashedColor); // 如果为 0 则用蓝色标记，取余 5 为实线，其余为比较淡的线
    //     ctx.stroke();
    // }

    // // 从 pageSlicePos.y 处开始往 Y 轴负方向画 X 轴网格
    // const xRemaining = pageSlicePos.y;
    // const xRemainingTotal = Math.ceil(xRemaining / girdSize);
    // for (let i = 0; i < xRemainingTotal; i++) {
    //     if (i === 0) continue;
    //     ctx.beginPath(); // 开启路径，设置不同的样式
    //     ctx.moveTo(0, pageSlicePos.y - girdSize * i); // -0.5是为了解决像素模糊问题
    //     ctx.lineTo(CanvasWidth, pageSlicePos.y - girdSize * i);
    //     ctx.strokeStyle = i === 0 ? zeroColor : (i % 5 === 0 ? solidColor : dashedColor);// 如果为 0 则用蓝色标记，取余 5 为实线，其余为比较淡的线
    //     ctx.stroke();
    // }

    // // 从 pageSlicePos.x 处开始往 X 轴正方向画 Y 轴网格
    // const yPageSliceTotal = Math.ceil(canvasYWidth / girdSize); // 计算需要绘画y轴的条数
    // for (let j = 0; j < yPageSliceTotal; j++) {
    //     ctx.beginPath(); // 开启路径，设置不同的样式
    //     ctx.moveTo(pageSlicePos.x + girdSize * j, 0);
    //     ctx.lineTo(pageSlicePos.x + girdSize * j, CanvasHeight);
    //     ctx.strokeStyle = j === 0 ? zeroColor : (j % 5 === 0 ? solidColor : dashedColor);// 如果为 0 则用蓝色标记，取余 5 为实线，其余为比较淡的线
    //     ctx.stroke();
    // }

    // // 从 pageSlicePos.x 处开始往 X 轴负方向画 Y 轴网格
    // const yRemaining = pageSlicePos.x;
    // const yRemainingTotal = Math.ceil(yRemaining / girdSize);
    // for (let j = 0; j < yRemainingTotal; j++) {
    //     if (j === 0) continue;
    //     ctx.beginPath(); // 开启路径，设置不同的样式
    //     ctx.moveTo(pageSlicePos.x - girdSize * j, 0);
    //     ctx.lineTo(pageSlicePos.x - girdSize * j, CanvasHeight);
    //     ctx.strokeStyle = j === 0 ? zeroColor : (j % 5 === 0 ? solidColor : dashedColor);// 如果为 0 则用蓝色标记，取余 5 为实线，其余为比较淡的线
    //     ctx.stroke();
    // }

    myCanvas.style.cursor = "default";
    ctx.strokeStyle = "black";
    map.features.forEach((item) => {

      let coordinates = item.geometry.coordinates;

      coordinates.forEach((data) => {
        data.forEach((data1) => {
          if (data1.length > 2) {
            ctx.beginPath();
            data1.forEach((data2, i) => {
              let mapX = data2[0] - mapCenterPos[0];
              let mapY = mapH - (data2[1] + mapCenterPos[1]);
              let point = getPixelPos({
                x: mapX * mapScale,
                y: mapY * mapScale,
              });
              if (i === 0) {
                ctx.moveTo(point.x, point.y);
              }
              ctx.lineTo(point.x, point.y);
            });
            ctx.stroke();
            let isPointIn = ctx.isPointInPath(curMousePos.x, curMousePos.y);
            if (isPointIn) {

              ctx.fillStyle = "#ff4f02cc";
              ctx.fill();
              myCanvas.style.cursor = "pointer";
            }
          }
        });
      });


      if (item.properties.center && item.properties.center.length == 2) {
        let cp = item.properties.center;
        let mapX = cp[0] - mapCenterPos[0];
        let mapY = mapH - (cp[1] + mapCenterPos[1]);
        let center = getPixelPos({ x: mapX * mapScale, y: mapY * mapScale });

        ctx.fillStyle = "#000";
        ctx.textAlign = "center";
        ctx.fillText(item.properties.name, center.x, center.y);
      }
    });
  };

  function mouseMove(e) {
    curMousePos.x = e.clientX;
    curMousePos.y = e.clientY;
  }

  function getPixelPos(point) {
    return {
      x: pageSlicePos.x + (point.x / GRIDSIZE) * scale,
      y: pageSlicePos.y + (point.y / GRIDSIZE) * scale,
    };
  }

  function getRelativePos(point) {
    return {
      x: ((point.x - pageSlicePos.x) / scale) * GRIDSIZE,
      y: ((point.y - pageSlicePos.y) / scale) * GRIDSIZE,
    };
  }

  function getPixelSize(size) {
    return size * scale;
  }

  function getRelativeSize(size) {
    return size / scale;
  }

  /**
   * 滚轮缩放倍数
   */
  function mouseWheel(e) {
    if (e.wheelDelta > 0) {
      if (scale < 2000) {
        scale++;
      }
    } else {
      if (scale > 1) {
        scale--;
      }
    }
  }


  /**
   * 拖动 canvas 动态渲染，拖动时，动态设置 pageSlicePos 的值
   * @param e Event
   */
  function mouseDown(e) {
    const downX = e.clientX;
    const downY = e.clientY;
    const { x, y } = pageSlicePos;
    myCanvas.onmousemove = (ev) => {

      const moveX = ev.clientX;
      const moveY = ev.clientY;
      pageSlicePos.x = x + (moveX - downX);
      pageSlicePos.y = y + (moveY - downY);
      myCanvas.onmouseup = (en) => {
        myCanvas.onmousemove = null;
        myCanvas.onmouseup = null;
      };
    };
    myCanvas.onmouseup = (en) => {
      myCanvas.onmousemove = null;
      myCanvas.onmouseup = null;
    };
  }

  (function main() {
    drawLineGrid();
    requestAnimationFrame(main);
  })();
}



//计算两个时间之间的时间差 多少天时分秒
function intervalTime(startTime,endTime) {
    // var timestamp=new Date().getTime(); //计算当前时间戳
    var timestamp = (Date.parse(new Date()))/1000;//计算当前时间戳 (毫秒级)
     var date1 = ""; //开始时间
    if(timestamp<startTime){
        date1=startTime;
    }else{
        date1 = timestamp; //开始时间
  }

    var date2 = endTime; //结束时间
    // var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
    var date3 =  (date2- date1)*1000; //时间差的毫秒数
    //计算出相差天数
    var days = Math.floor(date3 / (24 * 3600 * 1000));
    //计算出小时数

    var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
    var hours = Math.floor(leave1 / (3600 * 1000));
    //计算相差分钟数
    var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
    var minutes = Math.floor(leave2 / (60 * 1000));

    //计算相差秒数

    var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
    var seconds = Math.round(leave3 / 1000);
    // return   days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
    return   days + "天 " + hours + "小时 " + leave3
}

